<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装一个简单的Ajax(纯回调)</title>
</head>
<body>
<script type="text/javascript">
    /*
    定义一个 sendAjax 函数，对 xhr 的 get 请求进行封装：
        1. 该函数接收 4 个参数：url（请求地址）、data（参数对象）、success（成功的回调）、error（失败的回调）
     */
    function sendAjax(url, data, success, error) {
        // 实例 xhr
        const xhr = new XMLHttpRequest()
        // 绑定监听
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) success(xhr.response)
                else error('请求出了点问题')
            }
        }
        // 整理参数
        let str = ''
        for (let key in data) {
            str += `${key}=${data[key]}`
        }
        str = str.slice(0, -1)
        xhr.open('GET', url + '?' + str)
        xhr.responseType = 'json'
        xhr.send()
    }

    sendAjax(
        'https://api.apiopen.top/api/getHaoKanVideo',
        {page: 2, size: 10}, (response) => {
            // 成功的回调
            console.log(response)
        }, (err) => {
            // 失败的回调
            console.log(err)
        })

</script>
</body>
</html>
